<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function () {
			getSpecification();
		})
		function getSpecification() {
			//获取模糊查询
			var specName = $("#probably").val();
			$.ajax({
				url: "/specification/getSpecification",
				data:{specName:specName},
				type: "post",
				async: false,//同步
				dataType: "json",
				success: function (result) {
					var specificationList = result.data;
					var table = '<table id="dataList" class="table table-bordered table-striped table-hover dataTable">';
						table += '<thead><tr><th class="" style="padding-right:0px"><input id="selall" type="checkbox" class="icheckbox_square-blue"></th> ';
						table += '<th class="sorting_asc">规格ID</th><th class="sorting">规格名称</th><th class="text-center">操作</th></tr></thead><tbody>';

					$.each(specificationList,function (i,v) {
						table += '<tr ><td><input name="box" type="checkbox" value="'+ v.id +'"></td><td>'+ v.id +'</td><td>'+ v.specName +'</td><td class="text-center">';
						table += '<button type="button" onclick="toUpdate('+ v.id +')" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal">修改</button></td></tr>';
					})
					table += '</tbody></table>';
					$("#tableId").html(table);
				},
				error: function () {
					alert.error("系统错误，请联系管理员！");0
				}
			})
		}

			//获取回显
			function toUpdate(id) {

				$.ajax({
					url:"/specification/toUpdate",
					type:"post",
					datatype:"json",
					data:{id:id},
					async:true,
					success:function(result){
						var list = null
						if (result.code == 200){
							list = result.data
						}
						var specName = null;
						var sid = null;
						var table = ''
						$.each(list,function (i,v) {
							table += '<tr><td><input name="updateOptionName"  class="form-control" placeholder="规格选项" value="'+ v.optionName +'"></td>';
							table += '<td><input name="updateOrders" class="form-control" placeholder="排序" value="'+ v.orders +'"></td><td>';
							table += '<button type="button" class="btn btn-default" onclick="deleteRow(this)" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
							specName = v.specName;
							sid = v.id;

						})
						$("#updateId").val(sid);
						$("#updateSpecName").val(specName);

						$("#ciUpdate").html(table);
					},
					error:function(result){
						alert("系统异常，请联系管理员！！！");
					}
				})
			}

		/* 修改数据 */
		function updateSpecification() {
			var optionName = $("input[name=updateOptionName]");
			var orders = $("input[name=updateOrders]");
			var optionNameList = [];
			var orderList = [];
			$(optionName).each(function (i,e) {
				optionNameList.push($(e).val())

			})
			$(orders).each(function (i,e) {
				orderList.push($(e).val())

			})
			$.ajax({
				url:"/specification/updateSpecification",
				data:$("#zhuUpdateTable").serialize()+ '&' + $.param({optionNameList:optionNameList,orderList:orderList}),
				dataType:"json",
				type:"post",
				async:true,
				success:function(result){
					alert(result.message);
					window.location.reload();
				},
				error:function(){
					alert("系统错误，请联系管理员");
				}
			})
		}

		/* 删除数据 */
		function deleteById() {

			var boxs = $("input[name=box]:checked");

			var ids = [];
			$(boxs).each(function (i,e) {
				alert($(e).val());
				ids.push($(e).val());
			})
			alert(ids);
			if (ids.length<=0){
				alert("请选择删除的行");
			}
			if (confirm("确定删除id为"+ ids +"的行？")) {

				$.ajax({
					url:"/specification/deleteSpecificationByIds",
					data:{ids:ids},
					type:"post",
					dataType:"json",
					async:true,
					success:function(result){
						alert(result.message);
						window.location.reload();
					},
					error:function(){
						alert("删除失败");
					}
				})
			}
		}
		//增加操作
		function addSpecification() {
			var optionName = $("input[name=addOptionName]");
			var orders = $("input[name=addOrders]");
			var optionNameList = [];
			var orderList = [];
			$(optionName).each(function (i,e) {
				optionNameList.push($(e).val())

			})
			$(orders).each(function (i,e) {
				orderList.push($(e).val())

			})
			$.ajax({
				url:"/specification/addSpecification",
				data:$("#zhuAddTable").serialize()+ '&' + $.param({optionNameList:optionNameList,orderList:orderList}),
				dataType:"json",
				type:"post",
				async:true,
				success:function(result){
					alert(result.message);
					window.location.reload();

				},
				error:function(){
					alert("系统错误，请联系管理员");
				}
			})
		}
		function addRow() {
			var tr ='<tr><td><input name="addOptionName"  class="form-control" placeholder="规格选项"></td><td>';
				tr += '<input name="addOrders" class="form-control" placeholder="排序"></td><td>';
				tr += '<button type="button" class="btn btn-default" title="删除" onclick="deleteRow(this)">';
				tr += '<i class="fa fa-trash-o"></i> 删除</button></td></tr>';
			$("#addRow").append(tr);
		}
		function deleteRow(obj) {
			$(obj).parent().parent().remove();
		}
	</script>
    
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->                
                    <div class="box-header with-border">
                        <h3 class="box-title">规格管理</h3>
                    </div>
                    <div class="box-body">
                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" onclick="deleteById()" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                                        
                                        <button type="button" class="btn btn-default" title="刷新" onclick="getSpecification()"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                    规格名称：<input  type="text" th:id="probably">
									<button class="btn btn-default" onclick="getSpecification()">查询</button>
                                </div>
                            </div>
                            <!--工具栏/-->
			                  <!--数据列表-->
<!-------------------------------------------------分割线-------------------------------------------------------------->
								<div th:id="tableId"></div>

			                  <!--数据列表/-->    
                        </div>
                        <!-- 数据表格 /--> 
                     </div>
                    <!-- /.box-body -->                    
	          		    
                                
  <!-- 编辑窗口 -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabel">规格编辑</h3>
			  </div>
			  <div class="modal-body">

				  <form th:id="zhuAddTable">
					  <table class="table table-bordered table-striped"  id="specificationTable"  width="800px">
						  <tr>
							  <td>规格名称</td>
							  <td><input  class="form-control" placeholder="规格名称" name="specName" >  </td>
						  </tr>
					  </table>
				  </form>

				  <!-- 规格选项 -->
				  <div class="btn-group">
					  <button type="button" class="btn btn-default" title="新增规格选项"  onclick="addRow()">新增规格选项</button>
				  </div>

				  <table class="table table-bordered table-striped table-hover dataTable" id="addRow">
					  <thead>
					  <tr>
						  <th class="sorting">规格选项</th>
						  <th class="sorting">排序</th>
						  <th class="sorting">操作</th>
					  </thead>
					  <tbody>
					  <tr>

						  <td>
							  <input  class="form-control" name="addOptionName" placeholder="规格选项">
						  </td>
						  <td>
							  <input  class="form-control" placeholder="排序" name="addOrders">
						  </td>
						  <td>
							  <button type="button" class="btn btn-default" title="删除" onclick="deleteRow(this)"><i class="fa fa-trash-o"></i> 删除</button>
						  </td>
					  </tr>
					  </tbody>
				  </table>
			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addSpecification()">保存</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>

<!-----------------------------------------------修改------------------------------------------------------------------>
  <!-- 编辑窗口 -->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabel1">规格修改</h3>
			  </div>
			  <div class="modal-body">

				  <form th:id="zhuUpdateTable">
					  <table class="table table-bordered table-striped"  width="800px" >
						  <tr>
							  <input type="hidden" th:id="updateId" name="id">
							  <td>规格名称</td>
							  <td><input  class="form-control" name="specName" th:id="updateSpecName" placeholder="规格名称" >  </td>
						  </tr>
					  </table>
				  </form>

				  <!-- 规格选项 -->
				 <!-- <div class="btn-group">
					  <button type="button" class="btn btn-default" onclick="addRow()" ><i class="fa fa-file-o"></i> 新增规格选项</button>

				  </div>-->

				  <form th:id="ciUpdateTable">
					  <table class="table table-bordered table-striped table-hover dataTable" >
						  <thead>
						  <tr>
							  <th class="sorting">规格选项</th>
							  <th class="sorting">排序</th>
							  <th class="sorting">操作</th>
						  </tr>
						  </thead>
						  <tbody  id="ciUpdate">

						  </tbody>
					  </table>
				  </form>
			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateSpecification()">保存</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>

</body>

</html>